import React from 'react';
import {
  View, Text, Image,
} from '@tarojs/components';
import Modal from '../Modal';

const styles = {
  maskView: {
    backgroundColor: 'rgba(0,0,0,0.5)',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  windows: {
    backgroundColor: '#fff',
    borderRadius: 10,
    width: 280,
    overflow: 'hidden',
    paddingBottom: 20,
  },
  title: {
    padding: 22,
    borderBottomColor: '#d8d8d85e',
    borderBottomWidth: 1,
    textAlign: 'center',
    borderBottomStyle: 'solid',
  },
  titleText: {
    textAlign: 'center',
    fontSize: 16,
    color: '#424242',
    fontWeight: 500,
  },
  item: {
    paddingLeft: 20,
    paddingRight: 40,
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomColor: '#d8d8d85e',
    borderBottomWidth: 1,
    borderBottomStyle: 'solid',
    justifyContent: 'flex-start'
  },
  itemIcon: {
    width: 50,
    height: 50,
    borderRadius: 6,
    marginRight: 10,
  },
};

interface IContentItem {
  icon: any;
  text: string;
}

interface IProps {
  visible: boolean;
  title: any;
  content: IContentItem[];
  onPress: any;
}

export default class ModalSelect extends React.Component<IProps, {}> {
  render() {
    const {
      visible, title, content, onPress
    } = this.props;
    return (
      <Modal
        visible={visible}
        mask
      >
        <View style={styles.windows}>
          {title ? (
            <View style={styles.title}>
              {typeof title === 'string' ? (
                <Text style={styles.titleText}>{title}</Text>
              ) : (
                title
              )}
            </View>
          ) : null}
          {content.map((item: IContentItem, index) => {
            return (
              <View
                key={`${index * 2}${item.text}`}
                style={styles.item}
                className='centerFlex'
                onClick={() => {
                  onPress(item);
                }}
              >
                <Image style={styles.itemIcon} src={item.icon} />
                <Text>{item.text}</Text>
              </View>
            );
          })}
        </View>
      </Modal>
    );
  }
}
